<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>尺寸问题</title>
		<style>
			/* 1+100 取值：选择器被选中几率增加*/
			div#d1{
				width: 50%;
				height: 500px;
				/*颜色色值：透明度：遮罩层、左栏*/
				background: rgba(243, 35, 134, .1);
			}
		/*最大宽度与最小宽度*/
		div#continer{
			background: #f0f0f0;
		}
		div.box{
			background: #ff0e42;
			color: #fff;
			width: 80%;
			/*最小宽度：设定，不能改变,移动端*/
			min-width:500px;
			/*最大宽度，设定,宽度最大上限600px，移动端*/
			max-width: 650px;
			/*页面设定最大与最小宽高、约定移动端宽高比。页面混乱*/
		}
		
		</style>
	</head>
	<body>
		<div id="d1"></div>
		<!-- 最大宽度与最小宽度 ：
		自适应：编写页面在任何浏览器下正常显示-->
		<div id="container"></div>
		<dir class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, perferendis. Harum ipsam pariatur delectus! Maiores modi facere ullam corporis mollitia obcaecati omnis vel quo nam, quidem iure ipsum quasi aperiam!</dir>
	</body>
</html>